<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AceHub</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/carousel.css">
    <link rel="stylesheet" href="css/media.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="shortcut icon" href="../header-footer/images/ico.jpg" type="image/x-icon">
    <link rel="stylesheet" href="../header-footer/common.css">
</head>
<style>
.course-card{
display: block;
background-color: #f0f0f0;  
padding: 15px;  
border-radius: 8px;  
color: white;
text-decoration: none;
}
.course-info{
padding: 0px;
}
/*Unified container centering and maximum width limit*/
.carousel,
.recommended-courses,
.hot-courses,
.new-courses {
max-width: 1200px; /*The maximum width can be adjusted as needed*/
margin: 40px auto; /*Vertical spacing+horizontal centering*/
transform: scale(1.05); /*Enlarge by 5%*/
transform-origin: center top; /*Using the top center as the scaling origin*/
box-sizing: border-box;
}
.recommended-courses h2,
.hot-courses h2,
.new-courses h2{
color: #6195FF;
font-weight: 600;
}
/*If there is a width limit on the internal elements of the carousel image*/
.carousel-inner {
max-width: 100%;
margin: 0 auto;
}


</style>
<body>
    <!-- 页眉 -->
    <header class="navbar">
        <div class="nav">
            <div class="logo">
                <a href="../Homepage/WebsiteHomepage.html"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <nav>
                <ul>
                    <!-- TODO 补充链接 -->
                    <li><a href="../Homepage/WebsiteHomepage.html">home page</a></li>
                    <li><a href="./courseList.html">course</a></li>
                    <li><a href="./league.html">Alliance colleges</a></li>
                    <li><a href="./about-us.html">About Us</a></li>
                </ul>
            </nav>
        </div>
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="Search for ">
            <button type="button" id="searchButton"><i class="fas fa-search"></i></button>
        </div>
        <div class="info">
            <!-- TODO 补充链接 -->
        </div>
    </header>

    <main>

        <div class="main-content">
            <div class="left-content">
                <!-- 轮播图部分 -->
                <section class="carousel">
                    <!-- 导航栏插入到轮播图内部左侧 -->
                    <div class="carousel-nav">
                        <ul>
                            <li><a href="#" data-category="Science and Engineering" >Science and Engineering</a></li>
                            <li><a href="#" data-category="computer" >computer</a></li>
                            <li><a href="#" data-category="Education and Language" >Education and Language</a></li>
                            <li><a href="#" data-category="Literature and Art" >Literature and Art</a></li>
                            <!-- <li><a href="#" data-category="Entrepreneurship and Workplace" >Entrepreneurship and Workplace</a></li>
                            <li><a href="#" data-category="Philosophy, History, and Culture" >Philosophy, History, and Culture</a></li>
                            <li><a href="#" data-category="Economy and Management" >Economy and Management</a></li>
                            <li><a href="#" data-category="medicine" >medicine</a></li> -->
                        </ul>
                    </div>
                    <div class="carousel-inner">
                        <!-- 轮播图内容将由JavaScript动态生成 -->

                    </div>
                    <button class="prev" aria-label="Previous slide">❮</button>
                    <button class="next" aria-label="Next slide">❯</button>
                    <div class="carousel-indicators"></div>

                </section>
            </div>
        </div>



        <!-- 推荐课程部分 -->
        <section class="recommended-courses">
            <h2>Recommended courses</h2>
            <div class="course-list">
                <!-- 推荐课程将由JavaScript动态生成 -->
            
            
            </div>
            <div class="toggle-btn-wrapper">
                <button id="toggle-courses-btn">See more</button>
            </div>
            
        </section>

        <!-- 热门课程部分 -->
        <section class="hot-courses">
            <h2>Popular courses</h2>
            <div class="course-list">
                <!-- 热门课程将由JavaScript动态生成 -->

            </div>
        </section>

        <!-- 最新课程部分 -->
        <section class="new-courses">
            <h2>Latest courses</h2>
            <div class="course-list">
                <!-- 最新课程将由JavaScript动态生成 -->
           

            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-logo">
                <a href="#home"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <div class="footer-text">
                <nav class="footer-nav">
                    <ul>
                        <li><a href="./about.html">About Us</a></li>
                        <li><a href="./contact.html">Contact Us</a></li>
                        <li><a href="./privacy.html">Privacy Policy</a></li>
                        <li><a href="./terms.html">Term of service</a></li>
                    </ul>
                </nav>
                <div class="footer-info">
                    <p>&copy; 2025 AceHub reserves all rights</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="../database.js"></script>
    <script src="js/notesData.js"></script>
    <script src="js/commentsData.js"></script>
    <script src="js/coursesData.js"></script>
    <script src="js/courseWave.js"></script>
    <script src="../account/account.js"></script>
    <script src="../header-footer/navigation.js"></script>
    <script src="Homepage.js"></script>
    <script src="carousel.js"></script>


    <!--页眉js-->
    <script>
        //Retrieve user information based on token
window.onload = function () {
const userid = localStorage.getItem('token');
//If a user logs in, display their profile picture in the info div; if not, display the login and registration button
if (userid) {
const user = JSON.parse(localStorage.getItem(userid));
let profileUrl = '';
let profileName = '';
let accountUrl = '';
if (userid === 'admin') {
profileUrl = '../account/admin-profile.html';
ProfileName='Personal Center';
accountUrl = '../account/admin-profile.html';
} else if (userid === 'teacher') {
profileUrl = '../teacher/teacher-profile.html';
ProfileName='Personal Center';
accountUrl = '../account/teacher-setting.html';
} else {
profileUrl = '../student/student-profile.html';
ProfileName='My Learning';
accountUrl = '../account/student-setting.html';
}
document.querySelector('.info').innerHTML = `
                    <a href="${profileUrl}">
                        <img id="user-head" src="${user.avatar}" alt="用户头像"></a>
                    <div class="card">
                        <ul>
                            <li><a href="${profileUrl}">${profileName}</a></li>
                            <li><a href="${accountUrl}">Account Settings </a></li>
                            <li><a id="logout" href="#logout">Log Out</a></li>
                        </ul>
                    </div>
                `;
                //如果点击退出登录，清除token
                document.getElementById('logout').addEventListener('click', () => {
                    localStorage.removeItem('token');
                    window.location.href = '../Homepage/WebsiteHomepage.html';
                });
            }
            else {
                document.querySelector('.info').innerHTML = `
                    <a href="../account/login.html"><button class="login">log on</button></a>
                    <a href="../account/register.html"><button class="register">register</button></a>
                `;
            }
        }
    </script>

</body>

</html>